<script setup>
import { 
  readonly, 
  isReactive, 
  isReadonly, 
  isProxy,
} from 'vue';

import { 
  ElForm, 
  ElFormItem,
  ElInput,
  ElButton
} from 'element-plus';

const src = {
  email: 'laowang@kaifamiao.com',
  password: 'gebilaowang'
}
console.log( src );

// const user = reactive(src);
const user = readonly( src );
console.log( user );
console.log( isReactive( user ) ); // false
console.log( isReadonly( user ) ); // true
console.log( isProxy( user ) ); // true

function login(){
  console.log( user );
}

setTimeout( () => {
    console.log( src );
    user.email = 'sanfeng@wudang.com';
    user.password = 'hellowudang';
    console.log( src );
}, 5000);
</script>

<template>
  <div>
    <el-form :model="user" label-width="120px">
      <el-form-item label="登录邮箱">
        <el-input v-model="user.email" />
      </el-form-item>
      <el-form-item label="登录密码">
        <el-input v-model="user.password" />
      </el-form-item>
      <el-form-item label="">
        <el-button @click="login">登录</el-button>
      </el-form-item>
    </el-form>
    <ul>
        <li>user.email: {{user.email}}</li>
        <li>user.password: {{user.password}}</li>
    </ul>
  </div>
</template>